import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import style from './index.module.css'
import CircleSelectionList from '../../components/Circle/CircleSelectionList'
interface NavType {
  id: number
  active: boolean
  text: '重庆' | '关注' | '热门'
}
export default function Circle() {
  const [nav, setNav] = useState<Array<NavType>>([
    {
      id: 1,
      active: true,
      text: '重庆'
    },
    {
      id: 2,
      active: false,
      text: '热门'
    },
    {
      id: 3,
      active: false,
      text: '关注'
    }
  ])
  const [curActive, setCurActive] = useState<'重庆' | '关注' | '热门'>('重庆')

  const navigate = useNavigate()
  useEffect(() => {
    const id = localStorage.getItem('userId')
    if (!id) {
      navigate('/login')
    }
  })

  function toggleActive(id: number) {
    // 用于切换导航栏选中状态
    const newNav = nav.map((n) => {
      if (n.id === id) {
        n.active = true
        setCurActive(n.text)
      } else {
        n.active = false
      }
      return n
    })
    setNav(newNav)
  }

  return (
    <div className={style['circle-container']}>
      {/* 顶部导航 */}
      <div className={style['circle-navs']}>
        {nav.map((n) => (
          <div className={`${style['circle-nav']} ${n.active && style.active}`} key={n.id} onClick={() => toggleActive(n.id)}>
            {n.text}
          </div>
        ))}
      </div>
      {/* 数据展示 */}
      <CircleSelectionList curActive={curActive} />
    </div>
  )
}
